<template>
  <div v-if="visible" class="context-menu-overlay" @click="handleOverlayClick">
    <div class="context-menu" @click.stop :style="menuStyle">
      <div class="menu-header">
        <span class="menu-title">插入节点</span>
      </div>
      
      <!-- 基础节点 -->
      <div class="menu-section">
        <div class="section-title">基础节点</div>
        <div class="menu-items">
          <div 
            v-for="node in basicNodes" 
            :key="node.type"
            class="menu-item"
            @click="node.type === 'normal' ? showNormalSubmenu() : (node.type === 'group' ? openGroupSubmenu() : selectNode(node))"
          >
            <div :class="['item-icon', node.previewClass]"></div>
            <span class="item-text">{{ node.label }}</span>
            <div v-if="node.type === 'normal' || node.type === 'group'" class="submenu-arrow">▶</div>
          </div>
        </div>
      </div>
      
      <!-- 普通节点二级菜单 -->
      <div v-if="showNormalNodeSubmenu" class="submenu-overlay" @click="closeSubmenu">
        <div class="submenu" @click.stop :style="submenuStyle">
          <div class="menu-header">
            <span class="menu-title">普通节点类型</span>
          </div>
          <div class="menu-section">
            <div class="menu-items">
              <div 
                v-for="node in normalNodeTypes" 
                :key="node.type"
                class="menu-item"
                @click="selectNode(node)"
              >
                <div :class="['item-icon', node.previewClass]"></div>
                <span class="item-text">{{ node.label }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 组节点二级菜单 -->
      <div v-if="showGroupSubmenu" class="submenu-overlay" @click="closeSubmenu">
        <div class="submenu" @click.stop :style="submenuStyle">
          <div class="menu-header">
            <span class="menu-title">组内节点类型</span>
          </div>
          <div class="menu-section">
            <div class="menu-items">
              <div 
                v-for="node in normalNodeTypes" 
                :key="node.type"
                class="menu-item"
                @click="selectGroupNode(node)"
              >
                <div :class="['item-icon', node.previewClass]"></div>
                <span class="item-text">{{ node.label }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 流程节点 -->
      <div class="menu-section">
        <div class="section-title">流程节点</div>
        <div class="menu-items">
          <div 
            v-for="node in flowNodes" 
            :key="node.type"
            class="menu-item"
            @click="selectNode(node)"
          >
            <div :class="['item-icon', node.previewClass]"></div>
            <span class="item-text">{{ node.label }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NodeSelector',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    position: {
      type: Object,
      default: () => ({ x: 0, y: 0 })
    }
  },
  computed: {
    menuStyle() {
      // 确保x和y是数字类型
      const x = Number(this.position.x) || 0
      const y = Number(this.position.y) || 0
      
      // 菜单位置：在加号图标下方，稍微向右偏移
      return {
        left: `${x + 10}px`,
        top: `${y + 20}px`
      }
    },
    submenuStyle() {
      // 确保x和y是数字类型
      const x = Number(this.position.x) || 0
      const y = Number(this.position.y) || 0
      
      // 二级菜单位置：在主菜单右侧
      return {
        left: `${x + 160}px`,
        top: `${y + 20}px`
      }
    }
  },
  data() {
    return {
      showNormalNodeSubmenu: false,
      showGroupSubmenu: false,
      basicNodes: [
        { type: 'normal', label: '普通节点', previewClass: 'rect-node' },
        { type: 'circle', label: '圆形节点', previewClass: 'circle-node' },
        { type: 'diamond', label: '菱形节点', previewClass: 'diamond-node' },
        { type: 'group', label: '组节点', previewClass: 'group-node' }
      ],
      normalNodeTypes: [
        { type: 'rect', label: '矩形节点', previewClass: 'rect-node' },
        { type: 'HttpV1', label: 'HttpV1请求', previewClass: 'rect-node' },
        { type: 'JSV1', label: '脚本JSV1', previewClass: 'rect-node' },
        { type: 'process', label: '处理节点', previewClass: 'rect-node' },
        { type: 'judge', label: '判断节点', previewClass: 'rect-node' }
      ],
      flowNodes: [
        { type: 'start', label: '开始节点', previewClass: 'start-node' },
        { type: 'process', label: '处理节点', previewClass: 'process-node' },
        { type: 'end', label: '结束节点', previewClass: 'end-node' },
        { type: 'judge', label: '判断节点', previewClass: 'decision-node' }
      ]
    }
  },
  methods: {
    selectNode(node) {
      this.$emit('select', node)
      this.$emit('close')
      this.closeSubmenu()
    },
    handleOverlayClick() {
      this.$emit('close')
      this.closeSubmenu()
    },
    showNormalSubmenu() {
      this.showNormalNodeSubmenu = true
    },
    openGroupSubmenu() {
      this.showGroupSubmenu = true
    },
    closeSubmenu() {
      this.showNormalNodeSubmenu = false
      this.showGroupSubmenu = false
    },
    selectGroupNode(node) {
      // 发送组节点选择事件，包含普通节点信息
      this.$emit('select', {
        type: 'group-flow',
        nodeType: node.type,
        label: node.label,
        previewClass: node.previewClass
      })
      this.$emit('close')
      this.closeSubmenu()
    }
  }
}
</script>

<style scoped>
.context-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.context-menu {
  position: fixed;
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  max-width: 280px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  z-index: 10000;
}

.menu-header {
  padding: 8px 12px;
  background: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}

.menu-title {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.menu-section {
  padding: 4px 0;
}

.menu-section:not(:last-child) {
  border-bottom: 1px solid #f0f0f0;
}

.section-title {
  padding: 4px 12px;
  font-size: 11px;
  color: #999;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.menu-items {
  padding: 2px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  user-select: none;
}

.menu-item:hover {
  background-color: #f5f5f5;
}

.menu-item:active {
  background-color: #e6f7ff;
}

.item-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
}

.item-text {
  font-size: 13px;
  color: #333;
  flex: 1;
}

/* 节点图标样式 */
.rect-node {
  background-color: #EFF4FF;
  border-color: #5F95FF;
  border-radius: 3px;
}

.circle-node {
  background-color: #F6FFED;
  border-color: #52C41A;
  border-radius: 50%;
}

.diamond-node {
  background-color: #FFF7E6;
  border-color: #FA8C16;
  transform: rotate(45deg);
}

.diamond-node::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #FFF7E6;
  border: 1px solid #FA8C16;
  transform: rotate(-45deg);
  top: 3px;
  left: 3px;
}

.start-node {
  background-color: #EFF4FF;
  border-color: #5F95FF;
  border-radius: 50%;
}

.process-node {
  background-color: #F6FFED;
  border-color: #52C41A;
  border-radius: 3px;
}

.end-node {
  background-color: #FFF7E6;
  border-color: #FA8C16;
  border-radius: 50%;
}

.decision-node {
  background-color: #FFF1F0;
  border-color: #F5222D;
  transform: rotate(45deg);
}

.decision-node::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #FFF1F0;
  border: 1px solid #F5222D;
  transform: rotate(-45deg);
  top: 3px;
  left: 3px;
}

.group-node {
  background-color: #f0f8ff;
  border-color: #5F95FF;
  border-radius: 3px;
  position: relative;
}

.group-node::after {
  content: '⊞';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  color: #5F95FF;
  font-weight: bold;
}

/* 二级菜单样式 */
.submenu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.submenu {
  position: absolute;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 140px;
  z-index: 1001;
}

.submenu-arrow {
  margin-left: auto;
  font-size: 10px;
  color: #999;
}
</style> 